<template>
  <div class="cascader">
    <template v-if="multiple">
      <van-field
        readonly
        clickable
        is-link
        :label="label"
        :value="selectValue"
        :placeholder="placeholder"
        :required="required"
        :disabled="disabled"
        :rules="rules"
        @click="showPicker = true"
      >
        <template #right-icon>
          <van-row class="right-icon" type="flex" justify="end" align="center">
            <van-badge v-if="(value || []).length > 0" :content="(value || []).length" color="#EF502F" />
          </van-row>
        </template>
      </van-field>
      <CascaderSelectPopup
        :showPickerDlg="showPicker"
        :value="value"
        :title="label"
        :dataList="dataList"
        :color="color"
        :props="{
          text: prop.label,
          value: prop.value,
          children: prop.children
        }"
        @input="onChange"
        @close="showPicker = false"
      />
    </template>
    <template v-else>
      <van-field
        is-link
        readonly
        :label="label"
        :value="selectValue"
        :placeholder="placeholder"
        :required="required"
        :disabled="disabled"
        :rules="rules"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom" get-container="body">
        <van-cascader
          v-model="cascaderValue"
          :title="label"
          :active-color="color"
          :options="dataList"
          :field-names="{
            text: prop.label,
            value: prop.value,
            children: prop.children
          }"
          @close="showPicker = false"
          @finish="onChange"
        />
      </van-popup>
    </template>
  </div>
</template>

<script>
import { findTreeNodeObjectPath } from '@/utils';
import CascaderSelectPopup from './CascaderSelectPopup/index.vue';

export default {
  name: 'fieldCascader',
  props: {
    value: {
      type: [String, Number, Array]
    },
    label: {
      type: String
    },
    placeholder: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 选中颜色
    color: {
      type: String
    },
    dataList: {
      type: Array,
      default: () => []
    },
    prop: {
      type: Object,
      default: () => {
        return {
          value: 'id',
          label: 'name',
          children: 'children'
        }
      }
    }
  },
  components: {
    CascaderSelectPopup
  },
  data () {
    return {
      dirty: false,
      cascaderValue: undefined,
      showPicker: false
    }
  },
  methods: {
    onChange (value) {
      if (this.multiple) {
        this.$emit('input', value);
        this.$emit('change', value);
      } else {
        let tempValue = value.value;
        this.$emit('input', tempValue);
        this.$emit('change', tempValue);
      }
      this.showPicker = false;
      this.dirty = true;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    }
  },
  computed: {
    selectValue () {
      if (this.value == null || this.value === '') return '';
      if (this.multiple) {
        return '';
      } else {
        let temp = [];
        if (Array.isArray(this.dataList)) {
          let nodePath = findTreeNodeObjectPath(this.dataList, this.value, this.prop.value, this.prop.children);
          if (Array.isArray(nodePath)) temp = nodePath.map(item => item[this.prop.label]);
        }

        return temp.join(' / ');
      }
    },
    selectPath () {
      if (this.value == null || this.value === '') return undefined;
      if (Array.isArray(this.dataList)) {
        let nodePath = findTreeNodeObjectPath(this.dataList, this.value, this.prop.value, this.prop.children);
        if (Array.isArray(nodePath)) return nodePath.map(item => item[this.prop.value]);
      }
      return undefined;
    }
  },
  watch: {
    value: {
      handler (newValue) {
        this.cascaderValue = newValue;
      },
      immediate: true
    }
  }
}
</script>

<style>
</style>
